<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        header{
            width: 1000px;
            margin: 0 auto;
            border: 1px solid #000;
            display: flex;
            justify-content: space-between;
        }
        header .left{
            position: relative;
        }
        header .image{
            position: relative;
        }
        header .image > img{
            display: block;
            width: 400px;
            height: 400px;
        }
        header .image span{
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.329);
            left: 0;
            top: 0;
            display: none;
        }
        header ul{
            display: flex;
            justify-content: space-around;
            margin-top: 15px;
        }
        header li{
            width: 70px;
            border: 2px solid transparent;
        }
        header li.action{
            border-color: rgb(35, 11, 143);
        }
        header li img{
            display: block;
            width: 100%;
        }
        header .back{
            display: none;
            width: 400px;
            height: 400px;
            position: absolute;
            left: 400px;
            top: 0;
            border: 1px solid #000;
            background-image: url("https://img13.360buyimg.com/n1/jfs/t1/62356/34/20038/506000/62ce8160E7c7da38c/0e00f24c3d482738.jpg.avif");
            background-size: 800px 800px;
            
        }
    </style>
</head>
<body>
    <header>
        <!-- 放大镜 -->
        <div class="left">
            <div class="image">
                <img src="https://img13.360buyimg.com/n1/jfs/t1/62356/34/20038/506000/62ce8160E7c7da38c/0e00f24c3d482738.jpg.avif" alt="">
                <span></span>
            </div>
            <ul>
                <li class="action"><img src="https://img13.360buyimg.com/n1/jfs/t1/62356/34/20038/506000/62ce8160E7c7da38c/0e00f24c3d482738.jpg.avif" alt=""></li>
                <li><img src="https://img13.360buyimg.com/n1/jfs/t1/111133/34/25412/451394/62ce8160Eb58a34c2/950428e03279528a.jpg.avif" alt=""></li>
                <li><img src="https://img13.360buyimg.com/n1/jfs/t1/119497/24/28042/370082/62c63f85Efedf87d8/7c68438173122d95.jpg.avif" alt=""></li>
                <li><img src="https://img13.360buyimg.com/n1/jfs/t1/190592/14/26904/140699/62cd2739E35310be6/d4809495fab7c736.jpg.avif" alt=""></li>
            </ul>
            <div class="back"></div>
        </div>
        <!-- 商品信息 -->
        <div class="right">
            
        </div>
    </header>
    <script>
        // 1 当鼠标移入.image标签 设置.image>span 与.back 显示
        // 2 当鼠标移出.image标签 设置.image>span 与.back 隐藏
        // 3 当鼠标在.image标签中进行移动时,设置span标签跟着鼠标进行移动; 
        //   不能超出.image范围,设置.back的等比例背景图移动
        // 4 当鼠标移入li标签 设置当前li带有边框,其余li不要
        //   同时更改.image中img与.back的背景图的图都为当前li中img的路径

        // 1.先获取需要用到的标签
        var divimg = document.querySelector(".image");
        var span = document.querySelector(".image>span");
        var back = document.querySelector(".back");
        var heaLis = document.querySelectorAll("header li");

        // 10.
        for(var i = 0;i < heaLis.length;i++){
            heaLis[i].onmouseenter = function(){
                divimg.children[0].src = this.children[0].src;
                back.style.backgroundImage = `url(${this.children[0].src})`;

                for(var k = 0;k < heaLis.length;k++){
                    heaLis[k].style.borderColor = "transparent";
                }
                this.style.borderColor = "rgb(35, 11, 143)";

            }
        }


        // 4.
        divimg.onmousemove = function(e){
            // console.log("===");
            // console.log(e.offsetX); //获取鼠标到当前div的距离
            // console.log(e.offsetY);

            // 6. 鼠标到当前div的距离 = 鼠标到浏览器视图窗口的距离 - divimg标签到浏览器视图窗口的距离
            var t = e.clientY - divimg.getBoundingClientRect().y - span.offsetHeight / 2;
            var l = e.clientX - divimg.getBoundingClientRect().x - span.offsetWidth / 2;

            // 7.计算最大值
            var maxl = divimg.offsetWidth - span.offsetWidth;
            var maxt = divimg.offsetHeight - span.offsetHeight;

            // 8.限制最大值何最小值
            if(l < 0) l = 0;
            if(t < 0) t = 0;
            if(l > maxl) l = maxl;
            if(t > maxt) t = maxt;  


            // 5.设置span的移动 但是移动多少? 根据鼠标位置
            span.style.top = t + "px";
            span.style.left = l + "px";

            // 9. l : maxl == bl : 400 //其中400是背景图移动的最大值
            var bl = 400 / maxl * l;
            var bt = 400 / maxt * t;
            back.style.backgroundPositionX =-bl + "px";
            back.style.backgroundPositionY =-bt + "px";

        }

        // 2.
        divimg.onmouseenter = function(){
            span.style.display = "block";
            back.style.display = "block";
        }
        // 3
        divimg.onmouseleave = function(){
            span.style.display = "none";
            back.style.display = "none";
        }



    </script>
</body>
</html>